<template>
    <div class="left_box">
        <p class="subTitle ft_PingFangSC">公租房</p>  
        <div class="year_content">
            <div class="years">
                <span @click="changeCurrentYear(index)" :class="activeYear==index?'active':''" v-for="(item,index) in years" :key="index">
                    {{ item }}
                </span>
            </div>
            <Rotation :IntervalTime="15000" :w="45.87" :w_unit="'rem'" :h="'43.63rem'" :len="years.length" :current="activeYear" @changeCurrent="changeCurrentYear" >
                <HousingSecurity v-for="(item,index) in years" :key="index" :year="item"/>
            </Rotation>  
            <!-- <div class="content">
                <div class="top">
                    <div class="actived">
                        <p class="number">{{fdc_zfbz_gzf_bzzfs}}</p>
                        <p>住房保障数</p>
                    </div>
                    <div>
                        <p class="number">{{fdc_zfbz_gzf_sqrs}}</p>
                        <p>申请人数</p>
                    </div>
                    <div>
                        <p class="number">{{fdc_zfbz_gzf_btffhs}}</p>
                        <p>补贴发放户数</p>
                    </div>
                    <div>
                        <p class="number">{{fdc_zfbz_gzf_btffje}}</p>
                        <p>补贴发放金额</p>
                    </div>
                </div>
                <div class="echarts" id="chart"></div>
            </div> -->
        </div>
    </div>
</template>

<script>
import HousingSecurity from "./housingSecurity";
import Rotation from '@/components/common/Rotation';
export default {
    name:"LeftBottom_left",
    data:()=>{
        return {
            years:[],
            activeYear:-1,
            // fdc_zfbz_gzf_bzzfs:0,
            // fdc_zfbz_gzf_sqrs:0,
            // fdc_zfbz_gzf_btffhs:0,
            // fdc_zfbz_gzf_btffje:0
        }
    },
    components:{
        HousingSecurity,
        Rotation
    },
    methods:{
        changeCurrentYear(index){
            this.activeYear = index;
        },
    },
    // mounted(){
    //     this.drawChart();
    //     this.getData();
    // },
    beforeMount(){
        var currentY = new Date().getFullYear();
        this.years=Array.from(Array(2)).map((item,index)=>(currentY-index));
    }
}
</script>

<style lang="scss" scoped>
.left_box{
    .year_content{
        width: 100%;
        padding: 1.2rem;
        
    }
}
</style>